<template>
  <div>
    <div>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input type="text" v-model="ioNumber" placeholder="IO Number" clearable></el-input>
        </el-col>
        <el-col :span="4">
          <el-input type="text" v-model="costCenter" placeholder="Cost Center" clearable />
        </el-col>
        <el-col :span="4">
          <el-checkbox v-model="isCheck">红色预警</el-checkbox>
        </el-col>
        <el-col :span="8">
          <el-button @click="getAllIoNumberInfo" size="small" type="primary">查询</el-button>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-table
        :data="tableData"
        :row-class-name="tableRowClassName"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"
          width="80" />
        <el-table-column
          prop="costCenter"
          label="Cost Center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="ioNumber"
          label="IO Number"
          width="180">
        </el-table-column>
        <el-table-column
          prop="deviceName"
          label="设备">
        </el-table-column>
        <el-table-column
          prop="crNum"
          label="CR工时">
        </el-table-column>
        <el-table-column
          prop="allNum"
          label="总工时">
        </el-table-column>
        <el-table-column
          prop="status"
          label="项目状态">
          <template slot-scope="scope">
            {{ scope.row.status === 'Y' ? '开启' : '关闭' }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button v-if="userAuth == 'admin'" @click="clickCloseProject(scope.row.id,scope.row.status)" type="text"
                       size="small">
              {{ scope.row.status === 'Y' ? '关闭' : '开启' }}
            </el-button>
            <el-button type="text" size="small" @click="getDetail(scope.row.ioNumber,scope.row.costCenter)">
              详细
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-sizes="[10,20,30]"
        :page-size="pageSize"
        :current-page="pageNo"
        @current-change="pageClick">
      </el-pagination>
    </div>

    <!--    点击详细-->
    <div>
      <el-dialog
        title="总工时详细"
        :visible.sync="detailDia"
        width="70%">
        <el-table
          :data="detailTable"
          style="width: 100%">
          <el-table-column
            prop="id"
            label="ID"
            width="80" />
          <el-table-column
            prop="costCenter"
            label="Cost Center"
            width="180">
          </el-table-column>
          <el-table-column
            prop="ioNumber"
            label="IO Number"
            width="180">
          </el-table-column>
          <el-table-column
            prop="workMonth"
            label="月份">
          </el-table-column>
          <el-table-column
            prop="workHour"
            label="工时">
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { searchIoNumber, closeProject, searchDetail } from '../api/api'

export default {
  name: 'IoNumberInfo',
  data () {
    return {
      tableData: [],
      detailDia: false,
      userAuth: '',
      costCenter: '',
      ioNumber: '',
      total: 1,
      pageSize: 10,
      pageNo: 1,
      detailTable:[],
      isCheck: false
    }
  },
  methods: {
    async getAllIoNumberInfo () {
      let param = {
        ioNumber: this.ioNumber,
        costCenter: this.costCenter,
        pageSize: this.pageSize,
        isCheck: this.isCheck
      }
      var newVar = await searchIoNumber(param)
      this.tableData = newVar.detailData.records
      this.total = newVar.detailData.total
    },
    async pageClick (val) {
      let param = {
        ioNumber: this.ioNumber,
        costCenter: this.costCenter,
        pageSize: this.pageSize,
        pageNo: val,
        isCheck: this.isCheck,
      }
      this.pageNo = val
      var newVar = await searchIoNumber(param)
      this.tableData = newVar.detailData.records
     // this.total = newVar.detailData.total
    },
    tableRowClassName ({ row }) {
      if (row.allNum >= row.crNum * 0.9) {
        return 'warning-row'
      } else if (row.allNum >= row.crNum * 0.8) {
        return 'success-row'
      }
    },
    async clickCloseProject (vak, status) {
      let param = {
        id: vak,
        status: status === 'Y' ? 'N' : 'Y'
      }
      await closeProject(param)
      await this.getAllIoNumberInfo()
    },
    async getDetail(ioNumber,costCenter){
      let param = {
        ioNumber:ioNumber,
        costCenter:costCenter
      }
      var res = await searchDetail(param)
      this.detailTable = res.detailData;
      this.detailDia = true;
    }
  },
  created () {
    this.userAuth = window.localStorage.getItem('userAuth')
    this.getAllIoNumberInfo()
  }
}
</script>

<style>
.el-table .warning-row {
  /*background: #cd516c;*/
  color: red;
}

.el-table .success-row {
  /*background: #e8cb1c;*/
  color: yellow;
}
</style>